<template>
    <!-- 顶部栏按钮 -->
    <el-button type="primary" @click="dialogAdd = true">新增比赛</el-button>

    <!-- 表格 -->
    <el-table ref="tableRef" stripe border @selection-change="selectionChange" :data="tableData"
        style="margin-top: 10px;width: 100%">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="Id" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="champion" label="冠军" />
        <el-table-column prop="create_time" label="时间" />
        <el-table-column prop="actions" label="操作" width="240">
            <template #default="scope">
                <el-button size="small" type="success" @click="handleInfo(scope.row)">详细</el-button>
                <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- 新增弹框 -->
    <el-dialog v-model="dialogAdd" title="新增">
        <!-- 内容区域 -->
        <el-form :model="addData">
            <el-form-item label="名称">
                <el-input v-model="addData.name" />
            </el-form-item>
            <el-form-item label="冠军">
                <el-input v-model="addData.champion" />
            </el-form-item>
        </el-form>
        <!-- 底部插槽 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAdd = false">取消</el-button>
                <el-button type="primary" @click="handleAdd"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog v-model="dialogPut" title="修改">
        <!-- 内容区域 -->
        <el-form :model="putData">
            <el-form-item label="ID">
                <el-input v-model="putData.id" disabled />
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="putData.name" />
            </el-form-item>
            <el-form-item label="冠军">
                <el-input v-model="putData.champion" />
            </el-form-item>
        </el-form>
        <!-- 底部插槽 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogPut = false">取消</el-button>
                <el-button type="primary" @click="handlePut"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { useRouter } from 'vue-router'

const router = useRouter()

const tableRef = ref()

// 新增弹框
const dialogAdd = ref(false)
// 数据
const addData = ref({})
// 新增
const handleAdd = async () => {
    const result = await $api.post('/match/post', addData.value)
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        dialogAdd.value = false
        addData.value = {}
        initData()
    } else {
        ElMessage.error(msg)
    }
}

// 修改弹框
const dialogPut = ref(false)
// 点击修改
const handleEdit = (item) => {
    // 回传数据
    putData.value = item
    dialogPut.value = true
}
// 数据
const putData = ref({})
// 修改
const handlePut = async () => {
    const result = await $api.post('/match/put', putData.value)
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        dialogPut.value = false
        putData.value = {}
        initData()
    } else {
        ElMessage.error(msg)
    }
}

const handleInfo = (item) => {
    // window.open(`#/index/info/${item.id}`, '_blank')
    router.push(`/index/info/${item.id}`)
}

// 删除
const handleDelete = (item) => {
    ElMessageBox.alert('请确认是否删除，删除数据后无法找回', '警告！', {
        confirmButtonText: '确认',
        callback: async (action) => {
            console.log('action', action)
            if (action == 'confirm') {
                let deleteData = { 'id': item.id }
                const result = await $api.post('/match/delete', deleteData)
                const { code, data, msg } = result.data
                // 成功时
                if (code == 0) {
                    ElMessage.success(msg)
                    initData()
                } else {
                    ElMessage.error(msg)
                }
            }
        }
    })
}

// id列表
const idList = ref([])
// 勾选后会自动触发
const selectionChange = (items) => {
    // [{id: 1, name: '', ..}, {id: 2, name: '', ..}, {id: 3, name: '', ..}]
    idList.value = items.map((value) => value.id)
}

// 表格数据
const tableData = ref([])

// 初始化数据
const initData = async () => {
    const result = await $api.get('/match/get')
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        tableData.value = data
    } else {
        ElMessage.error(msg)
    }
}

// 获取数据操作放在onMounted生命周期中
onMounted(() => {
    initData()
})
</script>

<style scoped></style>